<html>
    <head>
        <title>登陆</title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <style>
        body{
            background: url('/style/admin/images/bg.jpg');
            background-size: 100% 100%;
        }
        .bg{
            width: 400px;
            height: 300px;
            background: rgba(152,121,21,0.5);
            position:absolute;
            left:0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            padding: 30px 30px 0 30px;
        } 
        label{
            color:white;
        }
    </style>
</head>
<body>
    <div class="bg"> 
        <form class="form-horizontal" id="formlog" role="form" action="" method="post" onsubmit="return false"> 
            <div class="form-group">
                <label  for="firstname" class="col-sm-3 control-label">用户名：</label>
                <div class="col-sm-9">
                    <input type="text" name="name" class="form-control" id="firstname"placeholder="请输入用户名"> 
                    <span id="NameErrorInfo"></span>      
                </div>
                
            </div>
            <div class="form-group">
                <label for="lastname" class="col-sm-3 control-label">密码：</label>
                <div class="col-sm-9">
                    <input type="text" name="pass" class="form-control" id="lastname"  placeholder="请输入密码">
                    <span id="PassErrorInfo"></span>      
                </div>
            </div> 
            <div class="form-group">
                <label for="lastname" class="col-sm-3 control-label">验证码：</label>
                <div class="col-sm-9">
                    <input type="text" name="code" class="form-control" id="lastname" placeholder="请输入验证码">      
                    <img onclick="this.src='{{URL('/admin/login/1')}}?' + new Date().getTime();" src="{{URL('/admin/login/1')}}" id="captcha" />
                    <span id="error"></span>
                </div>   
            </div>
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-9">
                    <button onclick="ajaxlog();" type="submit" class="btn btn-default">登录</button>
                </div>
            </div>
        </form> 
    </div>
    <script>
           function ajaxlog(){
               str=$("#formlog").serialize(); 
               $.post("/admin/login/login",{str:str,'_method':'post','_token':'{{csrf_token()}}'},function(data){
                   if(data==1){
                       window.location.href="/admin";
                   }else{ 
                       if(data==2){
                           alert("验证码错误");
                           return false;
                       }else if(data==3){
                           str="用户名或密码错误";
                          $("#error").text(str);
                          $("#error").css('color',"red");
                           return false;
                       }
                        var str='';
                        if(data.name){
                                 str='*'+data.name;
                                 $("#NameErrorInfo").text(str);
                                 $("#NameErrorInfo").css('color',"red");
                        }else{
                                 str='√';
                                 $("#NameErrorInfo").text(str);
                                 $("#NameErrorInfo").css('color',"green");
                         } 
                        if(data.pass){
                                 str='*'+data.pass;
                                 $("#PassErrorInfo").text(str);
                                 $("#PassErrorInfo").css('color',"red");
                        }else{
                                 str='√';
                                 $("#PassErrorInfo").text(str);
                                 $("#PassErrorInfo").css('color',"green");
                             }
                   }
               })
           }
    </script>
</body>
</html>